<template>
  <view class="update">
    <wd-navbar
      :bordered="false"
      placeholder
      safeAreaInsetTop
      left-arrow
      custom-style="background-color:#92beab;"
      custom-class="color:#fff"
    >
      <template #title>
        <view class="custom-title-style">个人信息</view>
      </template>
      <template #capsule>
        <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
      </template>
    </wd-navbar>
    <view class="body">
      <view class="body-avatar">
        <view class="user-img-box">
          <image
            :src="avatarFullUrl"
            :key="avatarKey"
            class="user-img"
            mode="scaleToFill"
          />
          <button
            open-type="chooseAvatar"
            class="user-img-update-logo"
            @chooseavatar="ChooseAvatar"
          >
            <img
              src="@/static/icon/update_default.png"
              alt=""
              class="user-img-update-logo"
            />
          </button>
        </view>
      </view>
      <view class="body-inform">
        <view class="inform-from">
          <view class="form-name">昵称</view>
          <view class="phone-input">
            <input
              v-model="form.username"
              class="phone"
              type="number"
              placeholder="请输入姓名"
            />
          </view>
        </view>
        <view class="inform-from">
          <view class="form-name">手机号码</view>
          <view class="phone-input">
            <view class="prefix">+86</view>
            <input
              v-model="form.phone"
              class="phone"
              type="number"
              placeholder="请输入手机号"
            />
          </view>
        </view>
        <view class="inform-from">
          <view class="form-name">邮箱</view>
          <view class="phone-input">
            <input
              v-model="form.email"
              class="phone"
              type="number"
              placeholder="请输入手机号"
            />
          </view>
        </view>
      </view>
      <button class="button" @click="submit">保存</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { putUserUpdateAPI } from "@/api/user";
import { useMemberStore } from "@/stroes/modules/member";
const avatarKey = ref(Date.now());
const memberStore = useMemberStore();
import { avatarUrlImg } from "@/api/config/http";
const form = ref({
  username: memberStore.userinfo?.username,
  phone: memberStore.userinfo?.phone,
  email: memberStore.userinfo?.email,
});

// 拼接完整 URL
const avatarFullUrl = computed(() =>
  memberStore.userinfo.avatar?.startsWith("http")
    ? memberStore.userinfo.avatar
    : avatarUrlImg + memberStore.userinfo.avatar
);
const submit = async () => {
  if (!form.value.username) {
    uni.showToast({ title: "请输入姓名", icon: "none" });
    return;
  }
  if (!form.value.phone) {
    uni.showToast({ title: "请输入手机号", icon: "none" });
    return;
  }
  if (!form.value.email) {
    uni.showToast({ title: "请输入邮箱", icon: "none" });
    return;
  }
  const res: any = await putUserUpdateAPI({ ...form.value });
  if (res.code === "200") {
    memberStore.setuserinfo({
      ...memberStore.userinfo,
      username: form.value.username,
      phone: form.value.phone,
      email: form.value.email,
    });
    uni.showToast({ title: "更新成功" });
  } else {
    uni.showToast({ title: "更新失败", icon: "error" });
  }
};
const ChooseAvatar = (e: any) => {
  const avatarPath = e.detail.avatarUrl; // wxfile:// 开头
  console.log("远程微信头像 URL", avatarPath);
  uni.uploadFile({
    url: "/user/upload/avatar",
    filePath: avatarPath,
    name: "file",
    method: "POST",
    success: (uploadRes) => {
      if (uploadRes.statusCode === 200) {
        const result = JSON.parse(uploadRes.data);
        if (result.code === "200") {
          const avatarUrlFromServer = result.data;
          memberStore.setuserinfo({
            ...memberStore.userinfo,
            avatar: avatarUrlFromServer,
          });
          avatarKey.value = Date.now();
          uni.showToast({ title: "修改成功", icon: "success" });
        } else {
          uni.showToast({ title: result.message || "上传失败", icon: "none" });
        }
      } else {
        uni.showToast({ title: "状态码异常", icon: "none" });
      }
    },
    fail: () => {
      uni.showToast({ title: "上传失败", icon: "none" });
    },
  });
};
const handleBack = () => {
  uni.navigateBack({});
};
const handleBackHome = () => {
  uni.reLaunch({
    url: "/pages/index/index",
  });
};
</script>

<style lang="scss">
page {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.update {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .body {
    display: flex;
    flex-direction: column;
    margin: 0 10%;
    .body-avatar {
      height: 210rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .body-inform {
      height: 100%;
      .inform-from {
        flex-shrink: 0;
        height: 130rpx;
        margin-bottom: 40rpx;
        .form-name {
          height: 50rpx;
          font-size: 36rpx;
        }
        .phone-input {
          height: 80rpx;
          padding: 0 40rpx;
          border-radius: 20rpx;
          background: rgba(250, 249, 248, 1);
          display: flex;
          align-items: center;

          .prefix {
            color: #666;
            font-size: 28rpx;
            margin-right: 20rpx;
            user-select: none;
          }
          .phone {
            flex: 1;
            font-size: 28rpx;
            padding: 0 20;
            height: 40rpx;
            border: none;
            outline: none;
          }
        }
      }
    }
    .button {
      display: flex;
      height: 140rpx;
      width: 80%;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 20rpx;
      background-image: linear-gradient(
        to right top,
        #89c4ae,
        #8bc5b0,
        #8cc7b1,
        #8ec8b3,
        #90c9b4
      );
    }
  }
}
.user-img-box {
  position: relative;
  .user-img {
    background-color: #fff;
    width: 200rpx;
    height: 200rpx;
    overflow: hidden;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }

  .user-img-update-logo {
    width: 54rpx;
    height: 54rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: transparent;
  }
}
.custom-title-style {
  color: #fff;
}
</style>
